<template>
 <button @click="isShow = true">点击显示盒子</button>
 <button @click="isShow = false">点击隐藏盒子</button>
  <Transition name="v">
    <div v-if="isShow" class="box"></div>
  </Transition>

</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const isShow = ref(false)
    return { isShow }
  }

}
</script>

<style lang="less" scoped>
.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
// Vue 动画类 - enter - 元素显示的时候添加
.v-enter-from {
  opacity: 0;
}
.v-enter-active {
  transition: all 5s;
}
.v-enter-to {
  opacity: 1;
}
// Vue 动画类 - leave - 元素显示的时候添加
.v-leave-from {
  opacity: 1;
}
.v-leave-active {
  transition: all 5s;
}
.v-leave-to {
  opacity: 0;
}
</style>
